  <div id="naturezas"></div>
  <% javascript_tag do -%>
    Ext.onReady(function(){
      // create initial root node
      root = new Ext.tree.AsyncTreeNode({
        text: 'Naturezas',
        id:'0'
      });

      treePanel = new Ext.tree.TreePanel({
          title: 'Naturezas dos Movimentos Financeiros',
          root:  root,
          id: 'tree-panel',
          autoScroll: true,
          rootVisible: true,
          renderTo: 'naturezas',

          loader: new Ext.tree.TreeLoader({
              url:'/arvores',
              requestMethod:'GET',
              baseParams:{format:'json'}
          }),

          contextMenu: new Ext.menu.Menu({
              shadow: 'true',
              items: [{ id: 'edit',   text: 'Editar Item'},
                      '-',
                      { id: 'newSub', text: 'Novo Subitem'}],
              listeners: {
                  itemclick: function(item) {
                      switch (item.id) {
                          case 'edit':
                              var n = item.parentMenu.contextNode;
                              if (n.parentNode) {
                                  window.location = 'naturezas/' + n.id + '/edit';
                              }
                              break;
                      }
                  }
              }
          }),

          listeners: {
              contextmenu: function(node, e) {
                  //  Register the context node with the menu so that a Menu Item's handler function can access
                  //  it via its parentMenu property.
                  node.select();
                  var c = node.getOwnerTree().contextMenu;
                  c.contextNode = node;
                  c.showAt(e.getXY());
              }
          }
      });

/*
      panel = new Ext.Panel({
	    renderTo: 'naturezas'
      });

      panel.add(treePanel);
      panel.doLayout();
*/
      root.expand();
    });
  <% end -%>

<br />